<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>连接数据源</title>
    <!-- 引入Vue.js -->
    <script src="/static/cdn/http_unpkg.com_vue@3_dist_vue.global.js"></script>
    <script src="/static/cdn/http_unpkg.com_dayjs_dayjs.min.js"></script>
    <script src="/static/cdn/http_unpkg.com_dayjs_plugin_customParseFormat.js"></script>
    <script src="/static/cdn/http_unpkg.com_dayjs_plugin_weekday.js"></script>
    <script src="/static/cdn/http_unpkg.com_dayjs_plugin_localeData.js"></script>
    <script src="/static/cdn/http_unpkg.com_dayjs_plugin_weekOfYear.js"></script>
    <script src="/static/cdn/http_unpkg.com_dayjs_plugin_weekYear.js"></script>
    <script src="/static/cdn/http_unpkg.com_dayjs_plugin_advancedFormat.js"></script>
    <script src="/static/cdn/http_unpkg.com_dayjs_plugin_quarterOfYear.js"></script>
    <script src="/static/cdn/http_cdn.jsdelivr.net_npm_ant-design-vue@4.2.1_dist_antd.min.js"></script>
    <link rel="stylesheet" href="/static/cdn/http_cdn.jsdelivr.net_npm_ant-design-vue@4.2.1_dist_reset.css">
    <script src="/static/cdn/axios.js"></script>
</head>
<body>
<div id="app" style="background-color: #eeeeee;height: 100vh;padding-top: 10vh;">

    <a-card title="连接数据源" :bordered="false" style="background-color: white;width: 50%;margin: 0 auto;">
        <a-spin :spinning="spinning">
        <a-form
                name="basic"
                :label-col="{ span: 8 }"
                :wrapper-col="{ span: 8 }"
                autocomplete="off"
        >
            <a-form-item
                    label="选择数据库"
                    name="dataBase"
            >
                <a-select
                        ref="select"
                        v-model:value="dataBase.type" @change="dbTypeChange"
                >
                    <a-select-option value="MySql">MySql</a-select-option>
                    <a-select-option value="Oracle">Oracle</a-select-option>
                    <a-select-option value="SqlServer">SqlServer</a-select-option>
                </a-select>
            </a-form-item>

            <a-form-item
                    label="主机"
                    name="host"
            >
                <a-input v-model:value="dataBase.host" v-model:addon-before="dataBase.prefix"/>
            </a-form-item>

            <a-form-item
                    label="端口"
                    name="port"
            >
                <a-input v-model:value="dataBase.port"/>
            </a-form-item>

            <a-form-item
                    label="schema"
                    name="schema"
            >
                <a-input v-model:value="dataBase.schema"/>
            </a-form-item>
            <a-form-item
                    label="用户名"
                    name="username"
            >
                <a-input v-model:value="dataBase.username"/>
            </a-form-item>

            <a-form-item
                    label="密码"
                    name="password"
            >
                <a-input v-model:value="dataBase.password"/>
            </a-form-item>

            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                <a-button type="dashed" @click="testConnect()">测试连接</a-button>
                <a-button type="primary" style="margin-left: 10px" :disabled="!connect.isSuccess" @click="dbOk()">确定
                </a-button>
            </a-form-item>

            <a-tag color="cyan">版本号:{{systemVersion.version}}</a-tag>
            <a-tag color="blue">buildId:{{systemVersion.buildId}}</a-tag>
            <a-tag color="green">部署日期:{{systemVersion.deployDateStr}}</a-tag>
        </a-form>
        </a-spin>
    </a-card>



    <a-alert style="margin: 20px;"
             message="备份数据,停机使用!"
             type="warning"></a-alert>
    <a-alert style="margin: 20px;"
             message="内部工具,请在研发指导下使用,否则造成的数据问题研发概不负责!"
             type="warning"></a-alert>
</div>

<script>
    const {createApp, ref, reactive, toRefs,} = Vue;
    const {message} = window.antd;
    // 创建Vue实例
    const dataSourceConfig = {
        setup() {
            const systemVersion = ref({

            });
            const spinning = ref(false);
            const connect = reactive({isSuccess: false});
            const testConnect = () => {
                spinning.value = true;
                axios.post("/datasource/testConnect", dataBase)
                    .then(res => {
                        if (res.data.code === 1) {
                            connect.isSuccess = true;
                            spinning.value = false;
                            systemVersion.value = res.data.data;
                            message.success('连接成功!');
                        } else {
                            message.warning(res.data.message);
                            spinning.value = false;
                        }
                    }).catch(function (error) {
                    spinning.value = false;
                    message.error(error.data.message);
                    console.log(error)
                });

                console.log(dataBase.type);
            }

            const dbTypeChange = (value) => {
                switch (value) {
                    case "MySql":
                        dataBase.prefix = "jdbc:mysql://";
                        dataBase.port = "3306";
                        break;
                    case "Oracle":
                        dataBase.prefix = "jdbc:oracle:thin:@";
                        dataBase.port = "1521";
                        dataBase.schema = "orcl";
                        break;
                    case "SqlServer":
                        dataBase.prefix = "jdbc:sqlserver://";
                        dataBase.port = "1433";
                        break;
                    default:
                        dataBase.prefix = "jdbc:mysql://";
                        dataBase.port = "3306";
                        break;
                }
                console.log(`selected ${value}`);
            }

            const dbOk = () => {
                connect.isSuccess = true;
                axios.post("/datasource/connect", dataBase)
                    .then(res => {
                        connect.isSuccess = false;
                        if (res.data.code === 1) {
                            message.success('创建数据源成功!');
                            window.location.href = '/home/homeIndex.html'
                        } else {
                            message.warning(res.data.message);
                        }
                    }).catch(function (error) {
                    connect.isSuccess = false;
                    message.error(error.message);
                    console.log(error)
                });

                console.log(dataBase.type);
            }


            const dataBase = reactive({
                prefix: "jdbc:mysql://",
                type: "MySql",
                host: "192.168.101.34",
                port: "3307",
                schema: "v8.2_0811",
                username: "root",
                password: "root123456"
            })

            return {
                dataBase,
                connect,
                dbOk,
                testConnect,
                spinning,
                systemVersion,
                dbTypeChange
            }
        }
    };
    // 挂载Vue实例到DOM元素
    createApp(dataSourceConfig)
        .use(antd)
        .mount('#app');


</script>
</body>
</html>